<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--移动端的适口-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>MJD-07</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
    <div class="jd-layout">
        <!-- 京东头部-->
        <div class="jd-header">
            <div class="header-in">
                <!-- logo-->
                <a href="#" class="icon-logo"></a>
                <!-- 搜索框-->
                <form action="#">
                    <span class="icon-search"></span>
                    <input type="search"  placeholder="啤酒饮料花生米，有没有要的？" />
                </form>
                <!-- 登录-->
                <a href="#" class="login">登录</a>
            </div>
        </div>
        <!-- banner-->
        <div class="jd-banner">
            <ul>
                <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l4.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l5.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l6.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l7.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!-- 导航栏-->
        <div class="jd-nav">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/nav0.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav7.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav1.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav2.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav3.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav4.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav5.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav6.png" alt=""/>
                        <p>商品分类</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 产品模块-->
        <div class="jd-product">
            <!--秒杀模块-->
            <div class="item sk">
                <div class="item-header">
                    <span class="sk-logo pull-left ml-10"></span>
                    <span class="sk-title pull-left ml-10">掌上秒杀</span>
                    <div class="time pull-left ml-10">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                    <a href="#" class="more pull-right mr-10">更多》</a>
                </div>
                <div class="item-body">
                    <ul class="clearfix">
                        <li>
                            <a href="#">
                                <img src="images/detail01.jpg" alt=""/>
                            </a>
                            <p>¥9.9</p>
                            <p>¥99.99</p>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/detail01.jpg" alt=""/>
                            </a>
                            <p>¥9.9</p>
                            <p>¥99.99</p>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/detail01.jpg" alt=""/>
                            </a>
                            <p>¥9.9</p>
                            <p>¥99.99</p>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-left br"><img src="images/cp1.jpg"/></a>
                    <a href="#" class="pull-right bb"><img src="images/cp2.jpg" /></a>
                    <a href="#" class="pull-right"><img src="images/cp3.jpg" /></a>
                </div>
            </div>
            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-right bl"><img src="images/cp4.jpg"/></a>
                    <a href="#" class="pull-left"><img src="images/cp5.jpg" /></a>
                    <a href="#" class="pull-left bt"><img src="images/cp6.jpg" /></a>
                </div>
            </div>
            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-left br"><img src="images/cp1.jpg"/></a>
                    <a href="#" class="pull-right bb"><img src="images/cp2.jpg" /></a>
                    <a href="#" class="pull-right"><img src="images/cp3.jpg" /></a>
                </div>
            </div>
            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-right bl"><img src="images/cp4.jpg"/></a>
                    <a href="#" class="pull-left"><img src="images/cp5.jpg" /></a>
                    <a href="#" class="pull-left bt"><img src="images/cp6.jpg" /></a>
                </div>
            </div>
            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-left br"><img src="images/cp1.jpg"/></a>
                    <a href="#" class="pull-right bb"><img src="images/cp2.jpg" /></a>
                    <a href="#" class="pull-right"><img src="images/cp3.jpg" /></a>
                </div>
            </div>
            <div class="item">
                <div class="item-header">
                    <h4>京东超市</h4>
                </div>
                <div class="item-body clearfix">
                    <a href="#" class="pull-right bl"><img src="images/cp4.jpg"/></a>
                    <a href="#" class="pull-left"><img src="images/cp5.jpg" /></a>
                    <a href="#" class="pull-left bt"><img src="images/cp6.jpg" /></a>
                </div>
            </div>
        </div>
        <!-- 底部-->
        <div class="jd-footer">
            <ul>
                <li>
                    <a href="#"><img src="images/icon-home01.png" alt=""/></a>
                </li>
                <li>
                    <a href="#"><img src="images/icon-catergry.png" alt=""/></a>
                </li>
                <li>
                    <a href="#"><img src="images/icon-me.png" alt=""/></a>
                </li>
                <li>
                    <a href="#"><img src="images/icon-cart.png" alt=""/></a>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/zepto/zepto.min.js"></script>
    <script src="js/zepto/touch.js"></script>
    <script src="js/zepto/fx.js"></script>
    <!--<script>
        // 用zepto写的第一遍
        // 如果正常绑定的触摸时间没有效果,就加上下面这段代码
        var w = -document.querySelector('.jd-banner').offsetWidth;
        var ul = document.querySelector('.jd-banner ul');
        var lis = document.querySelectorAll('ol li')
        var index = 1
        document.querySelector('.jd-banner').addEventListener('touchmove',function (e) {
            e.preventDefault()
        })
        $(".jd-banner").swipeLeft(function () {
            index++;
            clearInterval(timeID)
            yidong()
        })
        $(".jd-banner").swipeRight(function () {
            index--;
            clearInterval(timeID)
            yidong()
        })
        var timeID = setInterval(function () {
            index++;
            yidong()

        },1000)
        function yidong() {
            ul.style.transition = 'transform .3s';
            ul.style.transform = 'translateX('+index*w+'px)'
        }
        // 小圆点跟着动
        function yuandian() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].classList.remove('active')
            }
            lis[index - 1].classList.add('active')
        }
        // 动画结束做判断
        ul.addEventListener('transitionend',function () {
            if (index>=9) {
                index = 1;
            }
            if (index<=0) {
                index = 8;
            }
            yuandian() // 要把小圆点跟着动的这个函数,放在 transitionend 里面,每次动画完成之后,index也变换完之后再改变小圆点
            ul.style.transition = 'none';
            ul.style.transform = 'translateX('+index*w+'px)'
        })
    </script>-->


    <script>
        // 用zepto写的第二遍
        var w = -document.querySelector('.jd-banner').offsetWidth;
        var ul = document.querySelector('.jd-banner ul');
        var lis = document.querySelectorAll('ol li')
        var index = 1
        document.querySelector('.jd-banner').addEventListener('touchmove',function (e) {
            e.preventDefault()
        })
        function zouqi(x) {
            clearInterval(timeID)
            $(".jd-banner ul").animate({'transform':'translateX('+x+'px)'},300,function () {
                if (index>=9) {
                    index = 1
                }
                if (index<=0) {
                    index = 8
                }
                for (var i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('active')
                }
                lis[index-1].classList.add('active')
                $(".jd-banner ul").css('transform','translateX('+index*(w)+'px)');
                timeID = setInterval(function () {
                    index++
                    zouqi(index*w)
                },1000)
            })
        }
        $(".jd-banner").swipeLeft(function () {
            index++;
            zouqi(index*w)
        })
        $(".jd-banner").swipeRight(function () {
            index--;
            zouqi(index*w)
        })
        // 设置定时器
        var timeID = setInterval(function () {
            index++
            zouqi(index*w)
        },1000)
    </script>

</body>
</html>